<template>
  <div class="content industry-jpg1">
    <div class="industry">
      <div class="industry-row">
        <div>
          <div class="industry-title">
            <p>海宁市单位GDP能耗目标进度情况<i class="gl"></i><i class="gl"></i></p>
          </div>
          <table class="industry-table">
            <thead>
              <tr>
                <th rowspan="2">年份</th>
                <th colspan="3">上级下达目标</th>
                <th colspan="6">实际完成情况</th>
              </tr>
              <tr>
                <th>单位GDP能耗下降%</th>
                <th>全社会能耗消费总量增速%</th>
                <th>全社会用电总量增速%</th>
                <th>全社会能源消耗总量</th>
                <th>同比%</th>
                <th>GDP（亿元）</th>
                <th>同比</th>
                <th>三产GDP（亿元）</th>
                <th>占GDP比重%</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableDate" :key="item.index">
                <td :style="{color: '#0ff6fc'}">2018</td>
                <td>{{item[0]}}</td>
                <td>{{item[1]}}</td>
                <td>{{item[2]}}</td>
                <td>{{item[3]}}</td>
                <td>{{item[4]}}</td>
                <td>{{item[5]}}</td>
                <td>{{item[6]}}</td>
                <td>{{item[7]}}</td>
                <td>{{item[8]}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="industry-row">
        <div class="industry-box">
          <div class="industry-title">
            <p>单位GDP能耗下降率趋势分析<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'industryA',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#015caf'],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['2013','2014','2015','2016','2017'],
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'下降率',
            type:'line',
            stack: '总量',
            smooth: false,
            data:[4.4,3.8,5.4,4.05,4.2],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 69, 222, .5)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 100, 222, .3)'
                }])
              }
            },
          }
        ]
      },
      tableDate:[
        [3.67,3.55,11,'','',700.23,6.7,294.15,42],
        [4.2,4.42,8.5,354.34,2.7,668.48,7.2,260.1,7.5],
        [4.05,4.05,8.07,345.21,4.24,633.65,9.5,211.61,10.5],
        [4.59,4.7,8.02,354.12,3.2,575.62,9.1,186.71,11],
      ]
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })

  },
}
</script>

<style scoped>
  @import '../../../style/industry.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>